<template>
  <div>
    <div class="table-container">
      <div class="table-container__top">
        <div class="table-container__top--title">评估流程</div>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane disabled>
          <template #label>
        <div style="width: 80px;"></div>
        </template>
        </el-tab-pane>
      <el-tab-pane label="审核填报资料" name="1">
        <template #label>
          <span v-if="Number(approvalProcess) <= 1" class="number " :class="{ active: activeName === '1'}">1</span>
          <img v-else class="finish" src="@/assets/image/tabs_finish.svg" alt="">
          <span class="txt">审核填报资料</span>
          <img class="arrow" src="@/assets/image/right.png" alt="">
        </template>
        <div class="assess-container">
          <assess-one v-if="activeName==='1'" :assessId="assessId" :isDetail="isDetail" :approvalStatus="approvalStatus"></assess-one>
        </div>
      </el-tab-pane>
      
      <div v-if="assessModel != 2 && assessLevel == 0 ">
        <el-tab-pane label="评分结果表" name="2" :disabled="Number(approvalProcess) < 2 ">
          <template #label>
            <span v-if="Number(approvalProcess) <= 2" class="number" :class="{ active: activeName === '2' }">2</span>
            <img v-else class="finish" src="@/assets/image/tabs_finish.svg" alt="">
            <span class="txt">评分结果表</span>
            <img class="arrow" src="@/assets/image/right.png" alt="">
          </template>
          <div class="control-container">
            <assess-two v-if="activeName==='2'" :assessId="assessId" :approvalProcess="approvalProcess" @go-audit="goAudit" @go-three="goCommonNext"></assess-two>
          </div>
        </el-tab-pane>
        <el-tab-pane label="出具报告" name="3" :disabled="Number(approvalProcess) < 3 ">
          <template #label>
            <span v-if="Number(approvalProcess) <= 3" class="number" :class="{ active: activeName === '3' }">3</span>
            <img v-else class="finish" src="@/assets/image/tabs_finish.svg" alt="">
            <span class="txt">出具报告</span>
            <img class="arrow" src="@/assets/image/right.png" alt="">
          </template>
          <assess-three v-if="activeName==='3'" :assessId="assessId" :approvalProcess="approvalProcess"@go-report-last="onGoReportLast" @go-report-next="goCommonNext"></assess-three>
        </el-tab-pane>
        <el-tab-pane label="上传评审结果" name="4" :disabled="Number(approvalProcess) < 4 ">
          <template #label>
            <span v-if="Number(approvalProcess) <= 4" class="number" :class="{ active: activeName === '4' }">4</span>
            <img v-else class="finish" src="@/assets/image/tabs_finish.svg" alt="">
            <span class="txt">上传评审结果</span>
            <img class="arrow" src="@/assets/image/right.png" alt="">
          </template>
          <assess-four v-if="activeName==='4'" :assessId="assessId" :approvalProcess="approvalProcess" @goJGLast="onGoJGLast" @goJGNext="goCommonNext"></assess-four>
        </el-tab-pane>
        <el-tab-pane label="上传评审结论" name="5" :disabled="Number(approvalProcess) < 5 ">
          <template #label>
            <span v-if="Number(approvalProcess) <= 5" class="number" :class="{ active: activeName === '5' }">5</span>
            <img v-else class="finish" src="@/assets/image/tabs_finish.svg" alt="">
            <span class="txt">上传评审结论</span>
          </template>
          <assess-five v-if="activeName==='5'" :assessId="assessId" :approvalProcess="approvalProcess" @goJLLast="onGoJLLast" @goJLNext="onGoJLNext"></assess-five>
        </el-tab-pane>
      </div>
      <div v-else>
        <el-tab-pane label="出具报告" name="2" :disabled="Number(approvalProcess) < 3 ">
          <template #label>
            <span v-if="Number(approvalProcess) <= 3" class="number" :class="{ active: activeName === '2' }">2</span>
            <img v-else class="finish" src="@/assets/image/tabs_finish.svg" alt="">
            <span class="txt">出具报告</span>
            <img class="arrow" src="@/assets/image/right.png" alt="">
          </template>
          <assess-three v-if="activeName === '2'" :assessId="assessId" :approvalProcess="approvalProcess"  @go-report-last="onGoReportLast" @go-report-next="goCommonNext"></assess-three>
        </el-tab-pane>
        <el-tab-pane label="上传评审结果" name="3" :disabled="Number(approvalProcess) < 4 ">
          <template #label>
            <span v-if="Number(approvalProcess) <= 4" class="number" :class="{ active: activeName === '3' }">3</span>
            <img v-else class="finish" src="@/assets/image/tabs_finish.svg" alt="">
            <span class="txt">上传评审结果</span>
            <img class="arrow" src="@/assets/image/right.png" alt="">
          </template>
          <assess-four v-if="activeName === '3'" :assessId="assessId" :approvalProcess="approvalProcess" @goJGLast="onGoJGLast" @goJGNext="goCommonNext"></assess-four>
        </el-tab-pane>
        <el-tab-pane label="上传评审结论" name="4" :disabled="Number(approvalProcess) < 5 ">
          <template #label>
            <span v-if="Number(approvalProcess) <= 5" class="number" :class="{ active: activeName === '4' }">4</span>
            <img v-else class="finish" src="@/assets/image/tabs_finish.svg" alt="">
            <span class="txt">上传评审结论</span>
          </template>
          <assess-five v-if="activeName === '4'" :assessId="assessId" :approvalProcess="approvalProcess" @goJLLast="onGoJLLast" @goJLNext="onGoJLNext"></assess-five>
        </el-tab-pane>
      </div>
    </el-tabs>
    </div> 
  </div>
</template>

<script setup>
import AssessOne from './component/AssessOne.vue'
import AssessTwo from './component/AssessTwo.vue'
import AssessThree from './component/AssessThree.vue'
import AssessFour from './component/AssessFour.vue'
import AssessFive from './component/AssessFive.vue'
import { ref } from 'vue'
import { useRoute,useRouter } from 'vue-router'
import { getAssessDetail } from "@/api/sjhg/assess";
const activeName = ref('1')
//路由处取的id
const route = useRoute()
const router = useRouter()
let assessId = route.query?.id || null
//是否是查看详情  如果是1的话就是查看详情
// const isDetail = route.query?.isDetail
// //0-DCMM 1-DSMM 2-数据合规
// const assessModel = route.query?.assessModel || 0
// // 0 三级  1  四级
// const assessLevel = route.query?.assessLevel || 0
// //流程
// const approvalProcess = route.query?.approvalProcess || 0
// const approvalStatus = route.query?.approvalStatus || 0
const isDetail = ref()
const assessModel = ref(0)
const assessLevel = ref(0)
const approvalProcess = ref(0)
const approvalStatus = ref(0)

// 用户侧评估项目列表
onMounted(() => {
  if(assessId){
    console.log('===审核侧 onMounted==')
    getDetail();
  }
})


const handleClick = (tab, event) => {
  console.log(tab, event);
};

//评分跳上一步
const goAudit = ()=>{
   activeName.value = '1'
}
//上传报告上一步
const onGoReportLast = ()=>{
  if(assessModel.value !=2 && assessLevel.value == 0){
    activeName.value = '2'
  }else{
    activeName.value = '1'
  }
}
//评审结果的上一步
const onGoJGLast = ()=>{
  if(c){
    activeName.value = '3'
  }else{
    activeName.value = '2'
  }
}
//评审结论的上一步
const onGoJLLast = ()=>{
  if(assessModel.value != 2 && assessLevel.value == 0){
    activeName.value = '4'
  }else{
    activeName.value = '3'
  }
}
const onGoJLNext = ()=>{
  router.push({path: '/homine/assessProject/audit/list'})
}
// //评审结果的下一步
// const onGoJGNext = ()=>{
//   getDetail()
// }
// //上传报告的下一步
// const onGReportNext = ()=>{
//   getDetail()
// }
// //上传评分后点击下一步  去上传报告
// const goThree = ()=>{getDetail()}
  

//下一步
const goCommonNext = () =>{
  getDetail()
}

//项目详情
const projectDetail = ref(null)
const getDetail = () => {
    let params = {}
    params.assessId  = assessId
    getAssessDetail(params)
      .then((res) => {
        if (res.code == 200) {
          projectDetail.value = res.data
          approvalProcess.value = projectDetail.value.approvalProcess
          approvalStatus.value = projectDetail.value.approvalStatus
          assessModel.value = projectDetail.value.assessModel
          assessLevel.value = projectDetail.value.assessLevel
          isDetail.value = approvalStatus.value !== 0
          changeTab()
        } 
      })
      .finally(() => {
      });
  }

  function changeTab() {
    const processNum = Number(approvalProcess.value);
    if (assessModel.value != 2 && assessLevel.value == 0) {
      // First method mapping (1→1, 2→2, 3→3, 4→4, 5→5, 6→1)
      activeName.value = processNum === 6 ? '1' : String(processNum);
    } else {
      // Second method mapping (1→1, 3→2, 4→3, 5→4, 6→1)
      const mapping = {1: '1', 3: '2', 4: '3', 5: '4', 6: '1'};
      activeName.value = mapping[processNum] || activeName.value; // fallback to current value
    }
    console.log('------activeName.value--------',activeName.value)
}
  // function changeTab(){
  //   if(Number(approvalProcess.value) === 1){
  //     activeName.value = '1'
  //   }else if(Number(approvalProcess.value) === 2){
  //     activeName.value = '2'
  //   }else if(Number(approvalProcess.value) === 3){
  //     activeName.value = '3'
  //   }else if(Number(approvalProcess.value) === 4){
  //     activeName.value = '4'
  //   }else if(Number(approvalProcess.value) === 5){
  //     activeName.value = '5'
  //   }else if(Number(approvalProcess.value) === 6){
  //     activeName.value = '1'
  //   }
  // }

  // function changeTab2(){
  //   if(Number(approvalProcess.value) === 1){
  //     activeName.value = '1'
  //   }else if(Number(approvalProcess.value) === 3){
  //     activeName.value = '2'
  //   }else if(Number(approvalProcess.value) === 4){
  //     activeName.value = '3'
  //   }else if(Number(approvalProcess.value) === 5){
  //     activeName.value = '4'
  //   }else if(Number(approvalProcess.value) === 6){
  //     activeName.value = '1'
  //   }
  // }
</script>
<style lang="scss" scoped>
.control-container{
  width: 100%;
}
.assess-container{
  width: 100%;
}
.txt{
  font-family: PingFang SC-Bold, PingFang SC;
}
.number{
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  background: rgba(242, 243, 245, 1);
  border-radius: 14px;
  color:rgba(78, 89, 105, 1);
  margin-right: 8px;
}
.finish{
  width: 28px;
  height: 28px;
  margin-right: 8px;
}
.arrow{
  width: 16px;
  height: 16px;
  margin-left: 8px;
}
.active{
  background: rgba(22, 93, 255, 1);
  color:var(--font-white);
}
.table-container{
  min-height: calc(100vh - 100px);
  overflow: hidden;
}

.index {
  padding: 0;
  margin-top: 16px;
}

</style>
